<template>
    <div class="tian">
        <div class="top">
            <div class="box">
                <Tickets />
            </div>
            <span style="margin-left: 10px;">数据列表</span>
        </div>
    </div>
    <!-- 表格 -->
    <div class="table-container">
        <el-table :data="Flash" border style="width: 100%" table-layout="auto">
            <el-table-column prop="id" label="编号" />
            <el-table-column prop="name" label="秒杀时间段名称" />
            <el-table-column prop="startTime" label="每日开始时间">
                <template #default="scope">
                    {{ dayjs(scope.row.startTime).format("YYYY-MM-DD HH:mm:ss") }}
                </template>
            </el-table-column>
            <el-table-column prop="endTime" label="每日结束时间">
                <template #default="scope">
                    {{ dayjs(scope.row.endTime).format("YYYY-MM-DD HH:mm:ss") }}
                </template>
            </el-table-column>
            <el-table-column prop="productCount" label="商品数量"></el-table-column>
            <el-table-column label="操作" width="120">
                <template #default="{ row }">
                    <el-button link type="primary" size="small" @click="tiao(row.id)">商品列表</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import * as http from '../../request/http'
import { dayjs } from 'element-plus';
import {useRoute}from 'vue-router'
import {useRouter} from 'vue-router'
let router = useRouter()
const Flash =ref<Iproducts[]>([])
let idn = useRoute()
const rendering =()=>{
    http.flashSs.IselectList(idn.query.flashPromotionId as any ).then(res=>{
        console.log(res);
        Flash.value =res.data
    })
}
rendering()
//拿到上面的id，带到下面一起请求
let flashPromotionId =idn.query.flashPromotionId
const tiao =(id:number)=>{ //跳转商品列表
    router.push({
        path:'flashProductRelation',
        query:   {
            flashPromotionId,
            flashPromotionSessionId:id
        }    
        
    })
}

</script>

<style scoped>
.top {
    display: flex;
}

.box {
    width: 15px;
    height: 15px;

}

.tian {
    display: flex;
    justify-content: space-between;

    border: 1px solid gainsboro;
    height: 50px;
    line-height: 50px;
    margin: 20px;
    border-radius: 10px;
    padding: 10px;
}



.fen {
    float: right;
    margin-top: 10px;
    margin-right: 20px;
}
</style>